<template>
  <view>
    <cu-custom
      :bgImage="bgImage"
      topTitle="登录"
      :needBack="false"
      backIconColor="#ffffff"
      titleClass="commTitle white"
    ></cu-custom>
    <view class="content">
      <img src="@/static/images/login/bottom.png" class="top_img" />
      <view class="login-content">
        <view>
          <view class="form">
            <!-- 手机号 -->
            <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_phone.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.phonenumber"
                    type="text"
                    :maxlength="11"
                    placeholder="请输入手机号"
                  />
                </view>
              </view>
            </view>
            <!-- 密码 -->
            <!-- <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_pwd.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.password"
                    type="password"
                    :maxlength="11"
                    placeholder="请输入密码"
                    :password-icon="false"
                  />
                </view>
              </view>
            </view> -->
            <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_pwd.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.code"
                    type="number"
                    :maxlength="6"
                    placeholder="请输入验证码"
                  />
                </view>
                <view class="code" @tap="getCode">{{ codeText }}</view>
              </view>
            </view>
          </view>
        </view>
        <!--  -->
        <button
          class="login-button"
          :class="canLogin ? 'can-login' : ''"
          @tap="toLogin"
        >
          登录
        </button>
        <view class="btn-group">
          <view class="item" @tap="register">注册</view>
        </view>
      </view>
      <view class="people-img">
        <image src="../../static/images/login/people.png"></image>
      </view>
      <!-- 登录注册协议 -->
    </view>
  </view>
</template>

<script>
// AES加密
import { aesEncrypt } from "@/utils/aes";
// 通用验证方法
import { checkPhone } from "@/utils/common";
// 单个页面所需接口
import { login, sendMobileMessage, getInfo } from "@/api/user";
export default {
  data() {
    return {
      bgImage: require("../../static/images/login/header.png"),
      form: {
        phonenumber: "",
        code: "",
      },
      isSelected: false,
      showProtocal: false,
      canLogin: false,
      protocolTitle: "",
      protocalContent: "",
      codeText: "获取验证码",
      canGetCode: true,
      waitTime: 60,
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      if (!this.form.phonenumber) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
      } else if (!checkPhone(this.form.phonenumber)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
      } else {
        if (this.canGetCode) {
          this.waitTime--;
          this.canGetCode = false;
          this.codeText = `${this.waitTime}s`;
          let timer = setInterval(() => {
            if (this.waitTime > 1) {
              this.waitTime--;
              this.codeText = `${this.waitTime}s`;
            } else {
              clearInterval(timer);
              this.codeText = "重新发送";
              this.canGetCode = true;
              this.waitTime = 60;
            }
          }, 1000);
          sendMobileMessage({
            terminal_type: "DECLARATION_WECHAT",
            phone: this.form.phonenumber,
            codeType: "2",
          });
        }
      }
      // }
    },
    checkLogin() {
      this.canLogin = this.form.username && this.form.code;
    },
    async toLogin() {
      const _ts = this;
      if (!this.form.phonenumber) {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      }
      if (!this.form.code) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }
      login({
        phone: this.form.phonenumber,
        code: this.form.code,
				isLastReq: false
      }).then((res) => {
        if (res.code == 200) {
          // console.log("res===", res);
					uni.setStorageSync("access_token", res.data.token);
					this.getUserInfo()
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
		getUserInfo() {
		  getInfo().then((res) => {
        if (res.code == 200) {
          uni.setStorageSync("userInfo", res.data.user);
					uni.showToast({
					  title: "登录成功",
					  icon: "none",
					});
					setTimeout(() => {
					  uni.reLaunch({
					    url: "/pages/home/index",
					  });
					}, 1000);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
		},
    showProtocol(index) {
      if (index === 1) {
        this.protocolTitle = "惠开灵工注册协议";
        this.protocalContent = "惠开灵工注册协议";
        this.showProtocal = true;
      } else {
        this.protocolTitle = "隐私条款";
        this.protocalContent = "隐私条款";
        this.showProtocal = true;
      }
    },
    register() {
      uni.navigateTo({
        url: `/packageA/login/register`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100%;
		height: 90vh;
		background: #f5f7ff;

		.top_img {
			width: 100%;
			height: 521rpx;
		}
		
		

		.login-content {
			position: absolute;
			top: 334rpx;
			left: 24rpx;
			z-index: 10;
			width: 702rpx;
			background: #fff;
			border-radius: 31rpx;
			font-size: 24rpx;
			text-align: center;
			padding-top: 120rpx;
			height: 614rpx;
			box-shadow: 0px 4rpx 8rpx 0px rgba(124, 144, 222, 0.5);

			.login-title {
				margin: 48rpx 0 96rpx 0;
				text-align: center;
				font-size: 40rpx;
				font-weight: 600;
				color: #282a31;
			}

			.form {
				width: 632rpx;
				margin: 0 auto;

				.item_box {
					margin-bottom: 26rpx;

					.item {
						display: flex;
						align-items: center;
						height: 88rpx;
						border-bottom: 1px solid rgba(132, 132, 132, 0.2);
						// padding: 0 24rpx;
						.icon {
							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
						.line {
							width: 1rpx;
							height: 18rpx;
							background: #000000;
							opacity: 0.22;
							margin: 0 30rpx;
						}
						.input {
							flex: 1;
						}

						.code {
							width: 180rpx;
							padding-left: 24rpx;
							text-align: center;
							color: #436be6;
							font-size: 28rpx;
							height: 88rpx;
							line-height: 88rpx;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 20rpx;
								width: 4rpx;
								height: 48rpx;
								background: #c5cbda;
							}
						}
					}

					.login_input_error {
						border: 1px solid #e5503f;
					}

					.input_error {
						color: #e5503f;
						font-size: 24rpx;
						line-height: 24rpx;
						margin-top: 16rpx;
						margin-left: 20rpx;
						text-align: left;
					}
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				// height: 40rpx;
				margin-left: 40rpx;
				margin-top: 30px;
				margin-bottom: 28rpx;
				color: #666666;
				font-size: 24rpx
				::v-deep .u-checkbox__label {
					margin-right: 0;
				}

				.href {
					color: #F34242;
				}
			}

			.login-button {
				width: 632rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(90deg, #417FFC, #505EEB);
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22,121,253,0.28);
				border-radius: 43rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #ffffff;
				margin-top: 40rpx;
			}

			.login-button:after {
				border: none;
			}

			.can-login {
				background: #436be6;
			}

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #4974F5;
				margin-top: 16rpx;
				font-size: 28rpx;

				.item {
					margin: 0 58rpx;
				}
			}
		}
		
		.people-img {
			position: absolute;
			right: 53rpx;
			top: 24rpx;
			z-index: 11;
			image {
				width: 348rpx;
				height: 355rpx;
			}
		}
	}

	.protocol-content {
		height: calc(100% - 88rpx);
		background: #fff;

		.title {
			padding: 48rpx 0 36rpx 0;
			color: #282a31;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}

		.content {
			height: 700rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #565965;
			line-height: 48rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;

			.sub_title {
				font-weight: 600;
				color: #282A31;
			}
		}
	}

	.known {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		font-size: 28rpx;
		background: #436be6;
		border-radius: 0;
	}

	.known:after {
		border: none;
	}
</style>
